<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style type="text/css">
		*{
				margin: 0;
				padding: 0;
				
			}
			html{
				height: 100%;
				
			}
			body{
				height: 100%;
				width: 100vw;
				height: 100vh;
				padding: 0;
                margin: 0;
                background: #596778;
                color: #EEEEEE;
                text-align: center;
                font-family: "Lato", sans-serif;
			}
			.container{
				height: 100%;
				width: 100%;
				
				padding: 0;
                margin: 0;
                background: #596778;
                color: #EEEEEE;
                text-align: center;
                font-family: "Lato", sans-serif;
 }
            .bule {
                width: 100px;
                height: 100px;     
                background-color: #669AE1;
                box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
                text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
   
                -moz-border-radius: 50px;
                -webkit-border-radius: 50px;
                border-radius: 50px;
                position: relative;
                top: 100px;
                left: 800px;
 }
              .qingzheng{
              	
              	text-align:center;
                line-height:95px;
                font-size:30px;
              }
            .red{
            	 background-color: #FE4365;
                 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
                 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
                 width: 100px;
                 height: 100px; 
                 -moz-border-radius: 50px;
                 -webkit-border-radius: 50px;
                 border-radius: 50px;
                 position: relative;
                 top: 0px;
                 left: 700px;
            }
            .beiyuan{
            	text-align:center;
                line-height:95px;
                font-size:30px;
            }
            .green{
            	 background-color: #70CC72;
                 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
                 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
                 width: 100px;
                 height: 100px; 
                 -moz-border-radius: 50px;
                 -webkit-border-radius: 50px;
                 border-radius: 50px;
                 position: relative;
                 top: 30px;
                 left: 900px;
            }
            .nanyuan{
            	text-align:center;
                line-height:95px;
                font-size:30px;
            }
            .purple{
            	background-color: #C49CDE;
                box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
                text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
                width: 100px;
                height: 100px; 
                -moz-border-radius: 50px;
                -webkit-border-radius: 50px;
                border-radius: 50px;
                 position: relative;
                 top: 0px;
                  left: 700px;
            } 
            .leyuan{
            	text-align:center;
line-height:95px;
font-size:30px;
            }
            .or{
            	background-color: #FC913A;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
   width: 100px;
    height: 100px; 
     -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
     border-radius: 50px;
     position: relative;
     top: 0px;
     left: 695px;
            }
            .yayuan{
            	text-align:center;
line-height:95px;
font-size:30px;
            }
            .li{
            	 background-color: #62C2E4;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
    width: 100px;
    height: 100px; 
     -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
     border-radius: 50px;
     position: relative;
     top: 0px;
     left: 1200px;
   
            }
            .qinhu{
            	text-align:center;
line-height:95px;
font-size:30px;
            }
            .a{
            	background-color: #FC9D99;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
   width: 100px;
    height: 100px; 
     -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
     border-radius: 50px;
     position: relative;
     top: -50px;
     left: 120px;
            }
            .xin{
            	text-align:center;
line-height:95px;
font-size:30px;
            }
        a:link {text-decoration:none;}
		</style>
	</head>
	<body>
		<div class="container">
			
			<div class="red">
				<div class="beiyuan">
					<a href="http://chen-weipeng55555.gitee.io/final-exam-4">北五</a>
				</div>
			</div>
			<div class="purple">
				<div class="leyuan">
					<a href="#">乐园</a>
				</div>
			</div>
			<div class="bule"  >
	             <div class="qingzheng">
	             	<a href="#">清真</a>
	             </div>
			</div>
			
			
			<div class="or">
				<div class="yayuan">
					<a href="#">雅苑</a>
				</div>
			</div>
			<div class="green">
				<div class="nanyuan">
					<a href="#">南苑</a>
				</div>
			</div>
			<div class="qinhu">
				<div class="li">
					
						<a href="#">琴湖</a>
					
				</div>
			</div>
			<div class="a">
				<div class="xin">
					<a href="#">兴湘</a>
				</div>
				
			</div>
		</div>
		
	</body>
</html>
